<template>
<!-- 注册 -->
  <div id="NewsBox">
      <!-- 导航栏 -->
    <div class="navBox">
      <van-nav-bar
      title="潮流资讯"
      left-text="返回"
      right-text="•••"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      />
    </div>
      <div class="logoBox">
          <img src="../assets/images/注册/logo.png" alt="">
      </div>
      <div class="loginBox">
          <div class="phoneBox">
              <div class="logo"> <img src="../assets/images/注册/login_icon_1.png" alt=""> </div>
              <input type="text" placeholder="请输入手机号">
              <button>发送验证码</button>
          </div>
      </div>
      
      <div class="loginBox">
          <div class="phoneBox">
              <div class="logo"> <img src="../assets/images/注册/login_icon_2.png" alt=""> </div>
              <input type="text" placeholder="请输入验证码">
          </div>
      </div>
 
      <div class="loginBox">
          <div class="phoneBox">
              <div class="logo"> <img src="../assets/images/注册/login_icon_3.png" alt=""> </div>
              <input type="text" placeholder="请输入密码">
              <div class="logo right"> <img src="../assets/images/注册/login_icon_4.png" alt=""> </div>
          </div>
      </div>
      
      <div class="checkBox">
        <van-checkbox v-model="checked" icon-size="14px" checked-color="#999999"></van-checkbox>
        <span>请阅读</span>
        <span class="knows">《注册须知》</span>
      </div>

      <div class="buttonBox">
         <router-link to='/HeLLO'> 
            <van-button type="primary" size="large">注册 </van-button>
        </router-link>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
};
</script>

<style lang="less" scoped>
#NewsBox{
    overflow: hidden;
}
.logoBox{
    text-align: center;
    margin-top: 200px; 
    margin-bottom: 150px;
    img{
        width: 512px;
        line-height: 1;
    }
}
.loginBox{
    .phoneBox{
        width: 610px;
        height: 100px;
        margin: 0 auto 10px;
        background: #f3f4f6;
        display: flex;
        .logo{
            width: 100px;
            height: 100px;
            color: #234497;
            text-align: center;
            // line-height: 100px;
            img{
                width: 33px;
            }
        }
        .right{
            // float: right;
            margin-left: 90px;
        }
    }
    input{
        width: 324px;
        height: 50px;
        margin: auto 0;
        border-left: #e1e1e1 1px solid;
        border-top: none;
        border-bottom: none;
        border-right: none;
        padding-left: 30px;
        color:#000;
        font-size: 24px;
        box-sizing: border-box;
        background: #f3f4f6;
    }
    input::placholder{
        color:#e1e1e1;
        font-size: 24px;
    }
    button{
        width: 190px;
        height: 100px;
        background: #234497;
        color: #fff;
        font-size: 24px;
        line-height: 24px;
        text-align: center;
        border: none;
    }
}
.checkBox{
    width: 610px;
    height: 64px;
    margin: 20px auto;
    font-size: 24px;
    display: flex;
    align-items: center;
    color: #999;
    span{
        display: inline-block;
        margin-left: 10px;
    }
    .knows{
        color: #234497;
    }
}
.buttonBox{
    width: 610px;
    height: 100px;
    margin: 20px auto;

    
    .van-button{
        width: 100%;
        height: 100%;
        background-color:#234497;
        border-radius: 12px;
    }
}
</style>
